$(() => {
	let month = $("#month>.box"),
		day = $("#day>.box"),
		dow = $("#day-of-week>.box"),
		hour = $("#hour>.box"),
		minute = $("#minute>.box"),
		second = $("#second>.box")
	$('#app').show()
	month.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/12)*360}deg) translate(70px)`,
			transition: "1s transform"
		})
	})

	day.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/31)*360}deg) translate(140px)`,
			transition: "1s transform"
		})
	})


	dow.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/7)*360}deg) translate(210px)`,
			transition: "1s transform"
		})
	})

	hour.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/24)*360}deg) translate(280px)`,
			transition: "1s transform"
		})
	})

	minute.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/60)*360}deg) translate(350px)`,
			transition: "1s transform"
		})
	})

	second.children().each((ind, item) => {
		$(item).css({
			transform: `rotateZ(${(ind/60)*360}deg) translate(420px)`,
			transition: "1s transform"
		})
	})

	let r_month, r_day, r_dow, r_hour,
		r_minute, r_second
	r_month = r_day = r_dow = r_hour =
		r_minute = r_second = 0

	let now = new Date()
	let d_month = now.getMonth(),
		d_day = now.getDate(),
		d_dow = now.getDay(),
		d_hour = now.getHours(),
		d_minute = now.getMinutes(),
		d_second = now.getSeconds()

	r_month = d_month / 12 * 360
	r_day = (d_day-1) / 31 * 360
	r_dow = d_dow / 7 * 360
	r_hour = d_hour / 24 * 360
	r_minute = d_minute / 60 * 360
	r_second = d_second / 60 * 360
	setInterval(() => {
		let month = $("#month>.box"),
			day = $("#day>.box"),
			dow = $("#day-of-week>.box"),
			hour = $("#hour>.box"),
			minute = $("#minute>.box"),
			second = $("#second>.box")
		year = $('#year')

		let now = new Date()
		let d_year = now.getFullYear(),
			d_month1 = now.getMonth(),
			d_day1 = now.getDate(),
			d_dow1 = now.getDay(),
			d_hour1 = now.getHours(),
			d_minute1 = now.getMinutes(),
			d_second1 = now.getSeconds()


		year.text(d_year + "年")

		if (d_month != d_month1) {
			d_month = d_month1
			r_month += 360/12
		}
		month.css({
			transform: `rotate(${r_month*-1}deg)`,
			transition: `1s transform`
		})

		if (Math.abs(d_day - d_day1) > 1) {
			d_day = d_day1
			r_day = d_day / 31 * 360
		} else if (Math.abs(d_day - d_day1) == 1) {
			d_day = d_day1
			r_day += 360/31
		}
		day.css({
			transform: `rotate(${r_day*-1}deg)`,
			transition: `1s transform`
		})

		if (d_dow != d_dow1) {
			d_dow = d_dow1
			r_dow += 360/7
		}
		dow.css({
			transform: `rotate(${r_dow*-1}deg)`,
			transition: `1s transform`
		})

		if (d_hour != d_hour1) {
			d_hour = d_hour1
			r_hour += 360/24
		}
		hour.css({
			transform: `rotate(${r_hour*-1}deg)`,
			transition: `1s transform`
		})

		if (d_minute != d_minute1) {
			d_minute = d_minute1
			r_minute += 360/60
		}
		minute.css({
			transform: `rotate(${r_minute*-1}deg)`,
			transition: `1s transform`
		})

		if (d_second != d_second1) {
			d_second = d_second1
			r_second += 360/60
		}
		second.css({
			transform: `rotate(${r_second*-1}deg)`,
			transition: `1s transform`
		})
	}, 1000)
})
